{% extends "base.html" %}
{% load staticfiles %}
{% load bootstrap %}

{% block site_js %}
{{ block.super }}
<script src="{% static 'tinymce/tinymce.min.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="well well-sm">
        <h3>{{ section.article.title }}</h3>
        <h5><a href="{{ section.article.original_link }}">{{ section.article.original_title }}</a></h5>
    </div>

    <div class="row">
        <div class="col-md-6">
            {% if above_s %}
            <div class="pull-left text-left"><a href="{% url 'translations:translate' above_s.id %}">上一段</a></div>
            {% endif %}
            {% if next_s %}
            <div class="pull-right text-right"><a href="{% url 'translations:translate' next_s.id %}">下一段</a></div>
            {% endif %}
            <div class="center-block text-center">正在翻译：段落{{ section.index }} (共{{ section.article.section_set.count }}段)</div>
            <div style="border: 1px solid #CCC; padding: 10px; background: #F6F6F6 none repeat scroll 0% 0%; height: 500px; overflow:auto;" id="original-text">
                {{ section.content|safe }}
            </div>
        </div>
        <div class="col-md-6">
            <div><a href="javascript:void(0);" id="copy-original">复制原文</a></div>
            <form action="{% url 'translations:translate' section.id %}" method="post" id="translate-form">
                {% csrf_token %}
                {{ form|bootstrap_inline }}
                <input type="submit" class="btn btn-default" value="提交" />
            </form>
        </div>
    </div>
    <script>
        $("#copy-original").click(function() {
            content = tinyMCE.activeEditor.getContent();
            if(content.length > 0) {
                if(!confirm("确定覆盖已翻译内容？")) return;
            }
            var original_text = $("#original-text").html();
            tinyMCE.activeEditor.setContent(original_text);
        });
        var check_exit = true;
        window.onbeforeunload = function() {
            content = tinyMCE.activeEditor.getContent();
            if(!check_exit || content.length == 0)
                return;
            return "确认要放弃此翻译吗？";
        }
        $("#translate-form").bind("submit", function() {
            content = tinyMCE.activeEditor.getContent();
            if(content.length == 0) {
                alert("翻译内容不能为空！");
                return false;
            }
            check_exit = false;
        });
    </script>
{% endblock %}